<template>
<span class="container">
  <span class="searchn">
      <input type="text"  @keydown="search" :value="values">

      <ul>
    <li v-for="(item,index) in searchlist" @click="yeshistory(item.id,item.name)">{{item.name}}{{item.id}}</li>
  </ul>

  </span>
  
</span>
</template>

<script>
import _ from "lodash";
export default {
  name: "drugs",
  mounted() {
    //测试实时监听更新数据，与后台接口联系
  },
  data() {
    //这是供货商页面
    return {
      searchlist: [],
      values: ""
      // age: "",
      // sex: "",
      // site: "",
      // phone: "",
      // card: ""
    };
  },
  methods: {
    yeshistory(id, name) {
      //单机药品获取药品
      // let params = new URLSearchParams();

      // params.append("id", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);
      // params.append("drug_id", id);

      this.$http
        .post(
          "http://medical.qingguo188.com/user-patient/druginfo",
          {
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level,
            drug_id: id
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            //console.log(rester.data);
            if (rester.data.status == 1) {
              this.$emit("searchyao", rester.data.$message);
              this.values = "";
              this.searchlist = [];
            } else {
              // this.$layer.msg("该患者第一次来就诊");
            }
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    search: _.debounce(function(ev) {
      //搜索药品接口
      var _this = this;
      if (ev.target.value) {
        // let params = new URLSearchParams();
        // params.append("name", ev.target.value);
        // params.append("id", JSON.parse(localStorage.user).userid);
        // params.append("level", JSON.parse(localStorage.user).level);
        this.$http
          .post("http://medical.qingguo188.com/user-patient/searchdrug",  {
            name: ev.target.value,
            id:JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(
            rester => {
              console.log(rester.data);
              if (rester.data.status == 1) {
                if (rester.data.$message.length > 0) {
                  this.searchlist = [];
                  for (let i = 0; i < rester.data.$message.length; i++) {
                    this.searchlist.push({
                      name: rester.data.$message[i].name,
                      id: rester.data.$message[i].id
                    });
                  }
                } else {
                  //   this.values=ev.target.value
                  // this.$emit("searchList",this.values);
                  // this.$layer.msg("这是新用户");
                  //  this.searchlist = [];
                }
              } else {
                //this.$layer.msg("该患者第一次来就诊");
              }
            },
            function() {
              //this.$layer.alert("网络错误！");
            }
          );
      } else {
        //this.searchlist = [];
        // this.$layer.msg("无该用户资料");
      }
    }, 1000)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search {
  margin-left: -5px;
}
.searchn {
  width: 181px;
  position: relative;
  display: inline-block;
}
ul {
  position: absolute;
  width: 180px;
  background: white;
}
li {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #f1f1f1;
  text-align: center;
  cursor: pointer;
}
li:hover {
  background: teal;
  color: white;
}
</style>
